<template>
	<div id="banner">
		<div class="img">
			<img :src="img" class="img1" >
			<div class="introduce">
				<div class="chang">
					<div class="jis">
						<h1 class="clearfix">
							<img class="fl" src="../assets/images/shopping_ic01.png">
							<span class="fl">{{msg}}</span>
							<img class="fr" src="../assets/images/shopping_ic02.png">
						</h1>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Banner',
		props:['banner_img','banner_msg'],
		data(){
			return{
				img:this.banner_img,
				msg:this.banner_msg
			}
		}
	}
</script>

<style type="text/css">
	@import url("../assets/css/public.css");
</style>
<style scoped="scoped">
	#banner .img {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 500px;
	}
	
	#banner .img1 {
		position: absolute;
		left: 50%;
		top: 0;
		width: 1920px;
		height: 500px;
		margin-left: -960px;
	}
	
	.introduce {
		position: absolute;
		width: 100%;
		bottom: 20%;
	}
	
	.introduce .chang {
		width: 1280px;
		margin: 0 auto;
	}
	
	.introduce .jis {
		color: white;
		min-width: 230px;
		font-size: 20px;
	}
	
	.introduce h1 {
		width: 100%;
		line-height: 45px;
	}
	
	.introduce h1>img {
		margin-top: 8px;
		float: left;
	}
	
	.introduce h1>span {
		margin:0 13px;
		float:left
	}
</style>
